<script>
import github from "@/request";
import {getSearchRepositories} from "@/api/github";
export default {
    name: "App",
    data(){
        return {
            items:[],
            isLoading:true,
            isError:false
        }
    },
    async mounted(){
        // 问题：
        // 1- 获取响应体需要对其进行解构。
        // 2- 逻辑不可以复用

        // 封装axios
        // const {items} = await github.get("/search/repositories",{
        //     params:{
        //         q:"react"
        //     }
        // });
        // this.items = items;
        // this.isLoading = false;

        // 封装api
        try{
            const {items} = await getSearchRepositories("vue");
            this.items = items;
            this.isLoading = false;
        }catch (err){
            this.isError = true;
            this.isLoading = false;
        }



    }
}
</script>

<template>
    <div>
        <h3 v-if="isLoading">
            正在拼命加载中……
        </h3>
        <h3 v-else-if="isError">
            网络异常，请稍后再试
        </h3>
        <template v-else>
            <p v-for="item in items" :key="item.id">
                <a :href="item.html_url" target="_blank">{{item.full_name }}</a>
            </p>
        </template>

    </div>
</template>

<style scoped>

</style>